<template>
  <div>
      <div v-if="message.sender==='1'||message.sender===1" class="message">
        <el-avatar  class="left-avatar" shape="square" :size="'large'" :src="friendInfo.avatar"></el-avatar>
        <div class="message-bubble message-left">{{message.content}}
        </div>
      </div>
      <div v-else class="message">
        <el-avatar shape="square"  class="right-avatar" :size="'large'" :src="userInfo.avatar"></el-avatar>
        <div class="message-right message-bubble">{{message.content}}</div>
      </div>

  </div>
</template>

<script>
  export default {
    name: 'SingleMessage',
    props: ['message', 'friendInfo'],
    data(){
      return{
        userInfo: JSON.parse(window.localStorage.userInfo)
      }
    }
  }
</script>

<style scoped>
.message{
  clear: both;
  text-align: left;
  padding: 15px 0 15px 0;
}
  .message-left{
    float: left;
    background-color: white;
    border-style: solid; border-width: 1px; border-color: #D3DCE6;

  }
  .message-right{
    float: right;
    background-color: rgb(172,196,34);
    color: white;

  }
  .message-bubble{
    padding: 10px 10px 10px 10px;
    overflow: auto;
    max-width: 75%;
  }
  .left-avatar{
    float: left;
    margin-right: 10px;
  }
  .right-avatar{
    float: right;
    margin-left: 10px;
  }
</style>
